<template>
	<view class="container">
		<!-- 客服头部 -->
		<view class="service-header">
			<view class="header-content">
				<view class="service-icon">
					<text class="icon-text">💬</text>
				</view>
				<text class="service-title">客服中心</text>
				<text class="service-subtitle">为您提供专业的咨询服务</text>
			</view>
		</view>

		<!-- 联系方式 -->
		<view class="contact-section">
			<view class="section-header">
				<text class="section-title">联系方式</text>
			</view>
			
			<view class="contact-list">
				<view class="contact-item" @click="makeCall('13800138000')">
					<view class="contact-icon">
						<text class="icon-text">📞</text>
					</view>
					<view class="contact-info">
						<text class="contact-label">客服电话</text>
						<text class="contact-value">138-0013-8000</text>
					</view>
					<text class="contact-arrow">></text>
				</view>
				
				<view class="contact-item" @click="copyWechat">
					<view class="contact-icon">
						<text class="icon-text">💬</text>
					</view>
					<view class="contact-info">
						<text class="contact-label">微信客服</text>
						<text class="contact-value">tutor_service</text>
					</view>
					<text class="contact-arrow">></text>
				</view>
				
				<view class="contact-item" @click="sendEmail">
					<view class="contact-icon">
						<text class="icon-text">📧</text>
					</view>
					<view class="contact-info">
						<text class="contact-label">邮箱客服</text>
						<text class="contact-value">service@tutor.com</text>
					</view>
					<text class="contact-arrow">></text>
				</view>
			</view>
		</view>

		<!-- 服务时间 -->
		<view class="time-section">
			<view class="section-header">
				<text class="section-title">服务时间</text>
			</view>
			
			<view class="time-info">
				<view class="time-item">
					<text class="time-label">工作日</text>
					<text class="time-value">09:00 - 18:00</text>
				</view>
				<view class="time-item">
					<text class="time-label">周末</text>
					<text class="time-value">10:00 - 16:00</text>
				</view>
				<view class="time-item">
					<text class="time-label">节假日</text>
					<text class="time-value">10:00 - 15:00</text>
				</view>
			</view>
		</view>

		<!-- 常见问题 -->
		<view class="faq-section">
			<view class="section-header">
				<text class="section-title">常见问题</text>
			</view>
			
			<view class="faq-list">
				<view 
					class="faq-item" 
					v-for="(item, index) in faqList" 
					:key="index"
					@click="toggleFaq(index)"
				>
					<view class="faq-header">
						<text class="faq-question">{{ item.question }}</text>
						<text class="faq-arrow" :class="{ expanded: item.expanded }">></text>
					</view>
					<view class="faq-answer" v-if="item.expanded">
						<text class="answer-text">{{ item.answer }}</text>
					</view>
				</view>
			</view>
		</view>

		<!-- 意见反馈 -->
		<view class="feedback-section">
			<view class="section-header">
				<text class="section-title">意见反馈</text>
			</view>
			
			<view class="feedback-form">
				<view class="form-item">
					<text class="form-label">反馈类型</text>
					<picker 
						class="form-picker" 
						:value="feedbackTypeIndex" 
						:range="feedbackTypes" 
						@change="onFeedbackTypeChange"
					>
						<view class="picker-text">
							{{ feedbackTypes[feedbackTypeIndex] }}
						</view>
					</picker>
				</view>
				
				<view class="form-item">
					<text class="form-label">反馈内容</text>
					<textarea 
						class="form-textarea" 
						v-model="feedbackContent" 
						placeholder="请详细描述您的问题或建议..."
						maxlength="500"
					></textarea>
					<text class="char-count">{{ feedbackContent.length }}/500</text>
				</view>
				
				<view class="form-item">
					<text class="form-label">联系方式（选填）</text>
					<input 
						class="form-input" 
						v-model="feedbackContact" 
						placeholder="手机号或邮箱"
					/>
				</view>
				
				<button class="submit-btn" @click="submitFeedback">提交反馈</button>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			feedbackTypeIndex: 0,
			feedbackTypes: ['功能建议', '问题反馈', '投诉举报', '其他'],
			feedbackContent: '',
			feedbackContact: '',
			faqList: [
				{
					question: '如何预约小课辅导？',
					answer: '在首页点击"预约小课"，选择合适的时间段进行预约。预约成功后，管理员会确认您的预约。',
					expanded: false
				},
				{
					question: '课时充值后多久到账？',
					answer: '微信支付成功后，课时会立即到账。如果遇到问题，请联系客服处理。',
					expanded: false
				},
				{
					question: '可以取消预约吗？',
					answer: '可以取消预约，但需要在预约时间前2小时取消。取消后课时不会扣除。',
					expanded: false
				},
				{
					question: '课时有有效期吗？',
					answer: '课时没有有效期限制，可以长期使用。建议合理安排学习计划。',
					expanded: false
				},
				{
					question: '如何查看课程安排？',
					answer: '在首页点击"课程安排"，可以查看每周的课程安排表。',
					expanded: false
				}
			]
		}
	},
	methods: {
		makeCall(phone) {
			uni.showModal({
				title: '拨打电话',
				content: `确定要拨打 ${phone} 吗？`,
				success: (res) => {
					if (res.confirm) {
						uni.makePhoneCall({
							phoneNumber: phone
						})
					}
				}
			})
		},
		
		copyWechat() {
			uni.setClipboardData({
				data: 'tutor_service',
				success: () => {
					uni.showToast({
						title: '微信号已复制',
						icon: 'success'
					})
				}
			})
		},
		
		sendEmail() {
			uni.setClipboardData({
				data: 'service@tutor.com',
				success: () => {
					uni.showToast({
						title: '邮箱已复制',
						icon: 'success'
					})
				}
			})
		},
		
		toggleFaq(index) {
			this.faqList[index].expanded = !this.faqList[index].expanded
		},
		
		onFeedbackTypeChange(e) {
			this.feedbackTypeIndex = e.detail.value
		},
		
		submitFeedback() {
			if (!this.feedbackContent.trim()) {
				uni.showToast({
					title: '请输入反馈内容',
					icon: 'none'
				})
				return
			}
			
			uni.showLoading({
				title: '提交中...'
			})
			
			setTimeout(() => {
				uni.hideLoading()
				
				uni.showModal({
					title: '提交成功',
					content: '感谢您的反馈，我们会认真处理您的建议。',
					showCancel: false,
					success: () => {
						// 重置表单
						this.feedbackTypeIndex = 0
						this.feedbackContent = ''
						this.feedbackContact = ''
					}
				})
			}, 1500)
		}
	}
}
</script>

<style lang="scss" scoped>
.container {
	min-height: 100vh;
	background: linear-gradient(135deg, #0B0F1A 0%, #1a1f2e 100%);
	padding-bottom: 40rpx;
}

.service-header {
	margin: 20rpx;
	padding: 60rpx 40rpx;
	background: linear-gradient(135deg, #1976D2 0%, #2196F3 100%);
	border-radius: 20rpx;
	text-align: center;
	box-shadow: 0 8rpx 32rpx rgba(25, 118, 210, 0.3);
	
	.header-content {
		.service-icon {
			width: 100rpx;
			height: 100rpx;
			border-radius: 50%;
			background: rgba(255, 255, 255, 0.2);
			display: flex;
			align-items: center;
			justify-content: center;
			margin: 0 auto 30rpx;
			
			.icon-text {
				font-size: 48rpx;
			}
		}
		
		.service-title {
			display: block;
			font-size: 36rpx;
			color: #FFFFFF;
			font-weight: bold;
			margin-bottom: 12rpx;
		}
		
		.service-subtitle {
			font-size: 24rpx;
			color: rgba(255, 255, 255, 0.8);
		}
	}
}

.contact-section {
	margin: 20rpx;
	
	.section-header {
		margin-bottom: 20rpx;
		
		.section-title {
			font-size: 32rpx;
			color: #FFFFFF;
			font-weight: bold;
		}
	}
}

.contact-list {
	background: #1a1f2e;
	border-radius: 16rpx;
	overflow: hidden;
	border: 1rpx solid #2a2f3e;
	
	.contact-item {
		display: flex;
		align-items: center;
		padding: 30rpx;
		border-bottom: 1rpx solid #2a2f3e;
		
		&:last-child {
			border-bottom: none;
		}
		
		.contact-icon {
			width: 60rpx;
			height: 60rpx;
			border-radius: 50%;
			background: linear-gradient(135deg, #00B8D4 0%, #1976D2 100%);
			display: flex;
			align-items: center;
			justify-content: center;
			margin-right: 20rpx;
			
			.icon-text {
				font-size: 28rpx;
			}
		}
		
		.contact-info {
			flex: 1;
			
			.contact-label {
				display: block;
				font-size: 28rpx;
				color: #FFFFFF;
				margin-bottom: 8rpx;
			}
			
			.contact-value {
				font-size: 24rpx;
				color: #AAB4BE;
			}
		}
		
		.contact-arrow {
			font-size: 30rpx;
			color: #AAB4BE;
		}
	}
}

.time-section {
	margin: 20rpx;
	
	.section-header {
		margin-bottom: 20rpx;
		
		.section-title {
			font-size: 32rpx;
			color: #FFFFFF;
			font-weight: bold;
		}
	}
}

.time-info {
	background: #1a1f2e;
	border-radius: 16rpx;
	padding: 30rpx;
	border: 1rpx solid #2a2f3e;
	
	.time-item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 20rpx;
		
		&:last-child {
			margin-bottom: 0;
		}
		
		.time-label {
			font-size: 28rpx;
			color: #FFFFFF;
		}
		
		.time-value {
			font-size: 28rpx;
			color: #00B8D4;
			font-weight: 500;
		}
	}
}

.faq-section {
	margin: 20rpx;
	
	.section-header {
		margin-bottom: 20rpx;
		
		.section-title {
			font-size: 32rpx;
			color: #FFFFFF;
			font-weight: bold;
		}
	}
}

.faq-list {
	background: #1a1f2e;
	border-radius: 16rpx;
	overflow: hidden;
	border: 1rpx solid #2a2f3e;
	
	.faq-item {
		border-bottom: 1rpx solid #2a2f3e;
		
		&:last-child {
			border-bottom: none;
		}
		
		.faq-header {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 30rpx;
			
			.faq-question {
				flex: 1;
				font-size: 28rpx;
				color: #FFFFFF;
				margin-right: 20rpx;
			}
			
			.faq-arrow {
				font-size: 30rpx;
				color: #AAB4BE;
				transition: transform 0.3s ease;
				
				&.expanded {
					transform: rotate(90deg);
				}
			}
		}
		
		.faq-answer {
			padding: 0 30rpx 30rpx;
			
			.answer-text {
				font-size: 26rpx;
				color: #AAB4BE;
				line-height: 1.6;
			}
		}
	}
}

.feedback-section {
	margin: 20rpx;
	
	.section-header {
		margin-bottom: 20rpx;
		
		.section-title {
			font-size: 32rpx;
			color: #FFFFFF;
			font-weight: bold;
		}
	}
}

.feedback-form {
	background: #1a1f2e;
	border-radius: 16rpx;
	padding: 30rpx;
	border: 1rpx solid #2a2f3e;
	
	.form-item {
		margin-bottom: 30rpx;
		
		&:last-child {
			margin-bottom: 0;
		}
		
		.form-label {
			display: block;
			font-size: 28rpx;
			color: #FFFFFF;
			margin-bottom: 16rpx;
		}
		
		.form-picker {
			width: 100%;
			height: 80rpx;
			background: #2a2f3e;
			border-radius: 12rpx;
			border: 1rpx solid #3a3f4e;
			
			.picker-text {
				height: 80rpx;
				line-height: 80rpx;
				padding: 0 24rpx;
				font-size: 28rpx;
				color: #FFFFFF;
			}
		}
		
		.form-textarea {
			width: 100%;
			height: 200rpx;
			background: #2a2f3e;
			border-radius: 12rpx;
			padding: 24rpx;
			font-size: 28rpx;
			color: #FFFFFF;
			border: 1rpx solid #3a3f4e;
			margin-bottom: 12rpx;
		}
		
		.char-count {
			font-size: 24rpx;
			color: #AAB4BE;
			text-align: right;
		}
		
		.form-input {
			width: 100%;
			height: 80rpx;
			background: #2a2f3e;
			border-radius: 12rpx;
			padding: 0 24rpx;
			font-size: 28rpx;
			color: #FFFFFF;
			border: 1rpx solid #3a3f4e;
		}
	}
	
	.submit-btn {
		width: 100%;
		height: 88rpx;
		background: linear-gradient(135deg, #00B8D4 0%, #1976D2 100%);
		border-radius: 44rpx;
		color: #FFFFFF;
		font-size: 32rpx;
		font-weight: 500;
		border: none;
		margin-top: 20rpx;
	}
}
</style> 